import { Button, Col, Form, Input, Row, FormInstance, FormProps, ColProps, Skeleton } from 'antd';
import React from 'react';
import './index.less'
import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
import { AppContext } from '../AppProvider';
import useDebounce from '../useDebounce';
console.info('QueryFilter');

interface QueryFilterItemsProps {
  name?: string
  hidden?:boolean
  label?: string,
  children?: React.ReactNode
  col?:React.ForwardRefExoticComponent<ColProps & React.RefAttributes<HTMLDivElement>>
}
interface QueryFilterProps extends FormProps {
  form: FormInstance<any>;
  reset: boolean | (() => void);
  submit: () => void;
  items?: QueryFilterItemsProps[]
  children?: React.ReactNode;
  labelWidth?:string|number
  layout?: 'vertical' | 'horizontal' | 'inline'
  // initialValues?: any;
  [key: string]: any
}

const col3 ={
  xxl:8,
  xl:8,
  lg:12,
  md:12,
  sm:24,
  xs:24,
}
const col4 ={
  xxl:6,
  xl:8,
  lg:12,
  md:12,
  sm:24,
  xs:24,
}
const colConfig ={
  3:col3,
  4:col4,
}
const QueryFilter = ({ items,labelWidth=80, form, submit, reset, ...rest }: QueryFilterProps) => {
  const { queryFilter = {} } = React.useContext(AppContext)
  const ref = React.useRef(null);
  const [layout, setLayout] = React.useState(rest.layout || queryFilter.layout );
  const elResize = useDebounce(([entry]) => {

    const { height } = entry.contentRect;
    if (height >= 92) {
      setLayout('vertical')
    } else {
      setLayout('horizontal')
    }
    console.log({height})



  }, 100)
 
  React.useEffect(() => {
    if (layout) {
      return
    }
    let target

    target = new ResizeObserver(elResize);
    target.observe(ref.current);
    const el = ref.current
    return () => {
      target.unobserve(el)
    }

  }, [])
  const ActionPanel = () => {
    //  if(!layout){
    //   return
    //  }
    return <>
      <Button onClick={submit} icon={<SearchOutlined />} style={{ marginBottom: 8, marginRight: 8 }} type='primary'>查询</Button>
      {
        ( queryFilter.reset === false||reset === false) ? null : <Button onClick={reset as React.MouseEventHandler<HTMLElement>} icon={<ReloadOutlined />}>重置</Button>
      }
    </>
  }
  return (<Form
  
  colon={false} form={form} className='query-filter-container' {...rest} layout='horizontal'>
    <Row wrap={false} style={{ width: '100%' }}>

      <Col flex='auto' className='query-filter-form'>
        <div ref={ref} style={{ width: '100%' }}>

          <Row style={{ width: '100%' }}>
            {items.map(item =>   {
              if(item.hidden){
                return <Form.Item key={item.name} name={item.name} noStyle/>
              }
              let { children = <Input placeholder={`请输入${item.label}`} /> as any, ...rest } = item
              return <Col {...colConfig[queryFilter.colNum||3]} key={item.name} {...item.col}>
                <Form.Item    name={item.name}  {...rest} label={<div style={{width:labelWidth}}>{item.label}</div>}>
                  {children}
                  {/* {React.createElement(children.type, { style: { width: '100%' }, ...children.props })} */}
                </Form.Item>
              </Col>
            })}
            {
              layout === 'inline' ? <Col style={{ marginLeft: 12 }}>
                <ActionPanel />
              </Col> : null
            }

          </Row>

        </div>
      </Col>
      {(layout === 'inline' ) ? null :
        <Col flex={layout === 'vertical' ? '80px' : '172px'} className='query-filter-action'>
          <ActionPanel />
          {/* <Button onClick={submit} icon={<SearchOutlined />} style={{ marginBottom: 8, marginRight: 8 }} type='primary'>查询</Button>
      <Button onClick={reset} icon={<ReloadOutlined />}>重置</Button> */}
        </Col>}

    </Row>
  </Form>)
}
export default QueryFilter   